// import PropTypes from 'prop-types'
import React, { memo, useState } from 'react'
import { PictureWrapper } from './style'
import { shallowEqual, useSelector } from 'react-redux'
import PictureBrowser from '@/base-ui/picture-browser'

const DetailPictures = memo((props) => {
  const [showBrowserIndex, setShowBrowserIndex] = useState(-1)

  const { detailInfo } = useSelector(state => ({
    detailInfo: state.detail.detailInfo
  }), shallowEqual)

  
  return (
    <PictureWrapper>
      <div className="pictures">
        <div className="left">
          <div className="item" onClick={e => setShowBrowserIndex(0)}>
            <img src={detailInfo?.picture_urls?.[0]} alt="" />
            <div className="cover"></div>
          </div>
        </div>
        <div className="right">
          {
            detailInfo?.picture_urls?.slice(1,5).map((item, index)=>{
              return <div className="item" key={item} onClick={e => setShowBrowserIndex(index+1)}>
                <img src={item} alt="" />
                <div className="cover"></div>
              </div>
            })
          }
        </div>
      </div>
      <div className="showAllBtn" onClick={e => setShowBrowserIndex(0)}>
        显示全部照片
      </div>
      {showBrowserIndex!==-1&&
        <PictureBrowser picurls={detailInfo?.picture_urls} ShowBrowserHandler={setShowBrowserIndex}
        currIndex={showBrowserIndex} />
      }
    </PictureWrapper>
  )
})

// DetailPictures.propTypes = {}

export default DetailPictures